<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            border: 5px solid #036663;
            padding: 10px;
            margin: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="box">
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location); console.log(location); console.log(location); console.log(location); console.log(location);
    console.log(location);
</div>
<script>
    //    console.log(location);
    //    console.log(location.href);
    //    //location.href = "http://www.baidu.com";
    //    console.log(history);
    //    history.forward();//前进
    //    history.back();//后退
    //    history.go(1);//前进
    //    history.go(-1);//后退
    //    history.go(0);//刷新
    //
    //    window.onload = function(){
    //
    //    }
    //    //延时定时器  只执行一次
    //    var timerId = setTimeout(function(){
    //
    //    },1000)
    //    clearTimeout(timerId);
    //    //间歇定时器  隔一段时间执行一次
    //    var timerId = setInterval(function(){
    //
    //    },1000)
    //    clearInterval(timerId);

    //offset
    console.log("--------------------offset---------------------")
    var box = document.getElementById("box");
    console.log(box.offsetTop);
    console.log(box.offsetLeft);
    console.log(box.offsetParent);//最近带有定位的父元素
    console.log(box.parentNode);//父节点
    console.log(box.offsetHeight);// border + padding + width的大小
    console.log(box.offsetWidth);
    console.log("--------------------client---------------------")
    //client
    console.log(box.clientTop);//上边框的大小
    console.log(box.clientLeft);//左边框的大小
    console.log(box.clientHeight);// padding  + width  的大小
    console.log(box.clientWidth);
    console.log("--------------------scroll---------------------")
    //scroll
    console.log(box.scrollTop);//box里的内容滚动出去的距离
    console.log(box.scrollLeft);
    console.log(box.scrollHeight);//如果内容没有超出,那么scrollHeight和clientHeight 是一样的
    console.log(box.scrollWidth);//如果内容超出了,那么scrollHeight获取到的是内容的高度

    box.onscroll = function () {
        console.log(box.scrollTop);
    }

    //事件
    //onclick 点击事件
    //onmouseover 鼠标经过
    //onmouseout 鼠标离开
    //onmousemove 鼠标移动
    //onmouseup 鼠标抬起
    //onmusedown 鼠标按下
    //onfocus 鼠标获取焦点
    //onblur 鼠标失去焦点
    //onscroll 鼠标滚动
    //onkeydown 键盘按下
    //onkeyup 键盘抬起
    //ondblclick  双击
</script>
</body>
</html>